<template>
  <div class="check-in-container">
    <!-- 1. 签到按钮 -->
    <div class="check-in-button">
      <el-button
          type="primary"
          @click="submitCheckIn"
          :loading="loading"
          :disabled="isTodaySigned"
      >
        <span v-if="!loading && !isTodaySigned">立即签到</span>
        <span v-if="!loading && isTodaySigned">今日已签到</span>
        <span v-else>正在签到...</span>
      </el-button>
      <!-- 新增：显示自动刷新状态（可选，提升用户体验） -->

    </div>

    <!-- 2. 签到结果（常驻显示，未签到时隐藏） -->
    <div class="check-in-result" v-if="checkInResult">
      <h2>签到结果</h2>
      <p :class="checkInResult.success ? 'success-message' : 'error-message'">
        {{ checkInResult.message }}
      </p>
      <!-- 显示当天签到时间（成功时） -->
      <p v-if="checkInResult.success && todaySignTime" class="sign-time">
        签到时间：{{ todaySignTime }}
      </p>
    </div>

    <!-- 3. 历史签到记录 -->
    <div class="history-section" v-if="historyList.length > 0">
      <h3>📜 历史签到记录</h3>
      <el-table :data="historyList" border size="small" :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column label="签到日期" align="center">
          <template #default="scope">
            {{ formatDate(scope.row.attendanceDate) }}
          </template>
        </el-table-column>
        <el-table-column label="签到时间" align="center">
          <template #default="scope">
            {{ formatTime(scope.row.signInTime) }}
          </template>
        </el-table-column>
        <el-table-column label="签到状态" align="center">
          <template #default="scope">
            <el-tag type="success" size="small" v-if="scope.row.isLate === 0">正常</el-tag>
            <el-tag type="warning" size="small" v-else>迟到</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 无历史记录提示 -->
    <div class="no-history" v-else-if="hasLoadedHistory">
      <p>暂无历史签到记录~</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue"; // 新增：引入onUnmounted清除定时器
import http from '@/axios/http';
import { useUserStore } from "@/store/userStore";
import { ElMessage } from 'element-plus';

const userStore = useUserStore();
const checkInResult = ref(null);
const loading = ref(false);
const isTodaySigned = ref(false);
const todaySignTime = ref('');
const historyList = ref([]);
const hasLoadedHistory = ref(false);

// 新增：自动刷新相关配置
const autoRefreshInterval = ref(2500); // 刷新间隔
const autoRefreshTimer = ref(null); // 定时器实例（用于后续清除）
const autoRefreshEnabled = ref(true); // 是否启用自动刷新（可扩展手动开关）

// 格式化日期（yyyy-MM-dd）
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 格式化时间（HH:mm:ss）
const formatTime = (timeStr) => {
  if (!timeStr) return '';
  const time = new Date(`1970-01-01 ${timeStr}`);
  return `${time.getHours().toString().padStart(2, '0')}:${time.getMinutes().toString().padStart(2, '0')}:${time.getSeconds().toString().padStart(2, '0')}`;
};

// 提交签到（不变）
const submitCheckIn = () => {
  const adminUserId = userStore.getAdminUserId;
  if (!adminUserId) {
    ElMessage.warning('请先登录！');
    return;
  }

  loading.value = true;
  http.post('/glsb/checkIn', { adminUserId })
      .then((response) => {
        const res = response.data;
        checkInResult.value = res;
        if (res.success) {
          const now = new Date();
          todaySignTime.value = formatTime(now.toTimeString().slice(0, 8));
          isTodaySigned.value = true;
        }
      })
      .catch((error) => {
        console.error('签到失败:', error);
        checkInResult.value = {
          success: false,
          message: '签到失败：' + (error.message || '网络异常')
        };
      })
      .finally(() => {
        loading.value = false;
      });
};

// 加载历史签到记录（不变，复用为刷新逻辑）
const loadHistorySign = () => {
  const adminUserId = userStore.getAdminUserId;
  if (!adminUserId) return;

  http.post('/glsb/getHistorySign', { adminUserId })
      .then((response) => {
        const res = response.data;
        if (res.success) {
          historyList.value = res.historyList;
          // 检查当天签到状态
          const today = formatDate(new Date());
          const todaySign = res.historyList.find(item => formatDate(item.attendanceDate) === today);
          if (todaySign) {
            isTodaySigned.value = true;
            checkInResult.value = {
              success: true,
              message: `${userStore.getUserName || '你'}，今天已经签过到啦！`
            };
            todaySignTime.value = formatTime(todaySign.signInTime);
          } else {
            // 若当天无签到记录，重置状态（避免刷新后状态残留）
            isTodaySigned.value = false;
            checkInResult.value = null;
            todaySignTime.value = '';
          }
        } else {
          ElMessage.error(res.message || '加载历史记录失败');
        }
      })
      .catch((error) => {
        console.error('加载历史记录失败:', error);
        ElMessage.error('加载历史记录失败：网络异常');
      })
      .finally(() => {
        hasLoadedHistory.value = true;
      });
};

// 新增：初始化自动刷新
const initAutoRefresh = () => {
  // 清除已有定时器（避免重复创建）
  if (autoRefreshTimer.value) {
    clearInterval(autoRefreshTimer.value);
  }

  // 启用自动刷新时，创建定时器
  if (autoRefreshEnabled.value) {
    autoRefreshTimer.value = setInterval(() => {
      console.log('自动刷新签到数据...');
      loadHistorySign(); // 定时调用加载函数，更新数据
    }, autoRefreshInterval.value);
  }
};

// 页面挂载时：加载初始数据 + 启动自动刷新
onMounted(() => {
  loadHistorySign();
  initAutoRefresh();
});

// 新增：页面卸载时（如关闭标签页）清除定时器，避免内存泄漏
onUnmounted(() => {
  if (autoRefreshTimer.value) {
    clearInterval(autoRefreshTimer.value);
    autoRefreshTimer.value = null; // 释放引用
    console.log('自动刷新定时器已清除');
  }
});
</script>

<style scoped>
.check-in-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 40px 20px;
}

.check-in-button {
  margin-bottom: 30px;
  text-align: center; /* 新增：让刷新状态文字居中 */
}

/* 新增：自动刷新状态文字样式 */
.auto-refresh-status {
  margin-top: 10px;
  color: #666;
  font-size: 12px;
  margin-bottom: 0;
}

/* 签到结果样式（不变） */
.check-in-result {
  text-align: center;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  min-width: 300px;
}

.check-in-result h2 {
  margin-bottom: 15px;
  color: #333333;
  font-size: 18px;
}

.success-message {
  color: #52c41a;
  font-size: 16px;
  margin-bottom: 10px;
}

.error-message {
  color: #ff4d4f;
  font-size: 16px;
  margin-bottom: 10px;
}

.sign-time {
  color: #666666;
  font-size: 14px;
  margin: 0;
}

/* 历史记录样式（不变） */
.history-section {
  width: 100%;
  max-width: 800px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.history-section h3 {
  text-align: center;
  color: #333333;
  margin-bottom: 15px;
  font-size: 16px;
}

.no-history {
  margin-top: 20px;
  color: #999999;
  font-size: 14px;
}
</style>